<template>
  <div class="role-management">
    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="角色名称">
          <el-input
            v-model="searchForm.roleName"
            placeholder="请输入角色名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 工具栏 -->
    <div class="toolbar">
      <el-button type="primary" icon="Plus" @click="handleAdd">新增角色</el-button>
    </div>

    <!-- 角色列表 -->
    <el-card>
      <el-table :data="roleList" style="width: 100%" border>
        <el-table-column prop="roleName" label="角色名称" width="150" />
        <el-table-column prop="roleCode" label="角色编码" width="150" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
              <el-button type="primary" link @click="handlePermission(row)">权限</el-button>
              <el-popconfirm title="确定要删除此角色吗?" @confirm="handleDelete(row)">
                <template #reference>
                  <el-button type="danger" link>删除</el-button>
                </template>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'RoleManagement',
  setup() {
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const roleList = ref([])
    
    const searchForm = ref({
      roleName: ''
    })

    const loadRoles = () => {
      // 模拟数据
      roleList.value = Array.from({ length: pageSize.value }).map((_, index) => ({
        id: `${index + 1}`,
        roleName: `角色${index + 1}`,
        roleCode: `ROLE_${index + 1}`,
        description: `这是角色${index + 1}的描述信息`,
        createTime: new Date().toISOString()
      }))
      total.value = 50
    }

    const handleSearch = () => {
      currentPage.value = 1
      loadRoles()
    }

    const resetSearch = () => {
      searchForm.value = { roleName: '' }
      handleSearch()
    }

    const handleAdd = () => {
      ElMessage.info('新增角色功能待实现')
    }

    const handleEdit = (row) => {
      ElMessage.info(`编辑角色: ${row.roleName}`)
    }

    const handlePermission = (row) => {
      ElMessage.info(`配置角色权限: ${row.roleName}`)
    }

    const handleDelete = (row) => {
      ElMessage.success(`删除角色: ${row.roleName}`)
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      loadRoles()
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
      loadRoles()
    }

    onMounted(() => {
      loadRoles()
    })

    return {
      currentPage,
      pageSize,
      total,
      roleList,
      searchForm,
      handleSearch,
      resetSearch,
      handleAdd,
      handleEdit,
      handlePermission,
      handleDelete,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.role-management {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>